<template>
	<view class="page-box top bottom">
		<SearchCom :showUtils="showUtils" :searchFun="searchFun" :data="search" :resetSearchFun="resetSearchFun" :confirmSearchFun="confirmSearchFun" placeholder="请输入内容">
				
		</SearchCom>
		
		<view class="list-box">
			
			<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetail(item)">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="list-item-content">
							<view class="createusername-createtime">
								<view class="createusername">{{item.createusername}}</view>
								<view class="createtime">{{item.createtime}}</view>
							</view>
							<view class="context">{{item.context}}</view>
						</view>
						
						<template v-slot:right>
							<view class="swipe-btn">
								<view v-if="userInfo && userInfo.ifedite == '1'" class="edit-btn" @click.stop="editFun(item)">
									编辑
								</view>
								<view v-if="userInfo && userInfo.ifdelete == '1'" class="del-btn" @click.stop="delFun(item.id)">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view> 
		
		<view class="load-more" v-if="hasMore && showMore">
				加载中...
		</view>
		
		<view class="load-more" v-if="!hasMore">
				没有更多了~
		</view>
		<view class="bottom-btn" v-if="userInfo && userInfo.ifadd == '1'">
				<button type="primary" class="btn-confirm" size="mini" @click="createFun">创建播报</button>
		</view>
	</view>
</template>

<script setup>
	import SearchCom from "@/components/common/SearchCom/SearchCom.vue";
	import { GetBobaoList, DelteToDayBobao } from "@/configure/api/bobao.js"
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { computed, onMounted, ref, watch } from "vue"
	import { showSuccessMsg } from "@/utils/msg";
	import { getUserInfo } from "@/utils/getUserInfo.js"
	
	const userInfo = ref()
	const pageNo = ref(1);
	const pageSize = ref(10);
	const total = ref(10);
	const showMore = ref(false);
	const lists = ref([])
	
	const showUtils = ref(false)
	const search = ref({
		context: ''
	})
	
	const searchFun = (keywords)=>{
		search.value.context = keywords
		getLists(true)
	}
	
	const resetSearchFun = () => {
		search.value = {
			context: ''
		}
	}
	
	const confirmSearchFun = () => {
		searchFun()
	}
	
	const getLists = (reload) => {
		
		showMore.value = true;
		
		if(reload){
			pageNo.value = 1
			lists.value = []
		}
		
		const opt = {pageNo: pageNo.value,pageSize: pageSize.value};
		
		Object.keys(search.value).forEach((v,i)=>{
			if(search.value[v]){
				opt[v] = search.value[v]
			}
		})

		GetBobaoList(opt).then((data)=>{
			lists.value = [...lists.value,...data.data];
			lists.value = lists.value.map(v=>{
				return{
					...v,
					context: v.context.length > 30 ? v.context.slice(0,30) + '...' : v.context
				}
			})
			let obj = {};
			
			lists.value = lists.value.reduce (function(item,next){
			
				obj[next.id] ? ' ' : obj[next.id]  = true && item.push(next)
				
				return item;
			
			},[]);
			
			total.value = parseInt(data.msg);
			showMore.value = false;
			uni.stopPullDownRefresh();
			
		})

		
	}
	
	onPullDownRefresh(()=> {
		getLists(true);
	}) 
	
	const hasMore = computed(()=>{
		return pageNo.value * pageSize.value < total.value
	})
	
	onReachBottom(()=>{
		if(  hasMore.value && !showMore.value ){
			pageNo.value ++;
			getLists();
		}
		
	})
	
	onLoad((detail)=>{
		
	})
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res;
			getLists(true);
		})
	})
		
	const goDetail = (item) => {
		uni.navigateTo({url:`/pages/me/bobao/bobao-detail-add-edit/bobao-detail-add-edit?state=read&id=${item.id}`})
	}
	
	const createFun = () => {
		uni.navigateTo({url:`/pages/me/bobao/bobao-detail-add-edit/bobao-detail-add-edit?state=add`})
	}
	
	const editFun = (item) => {
		uni.navigateTo({url:`/pages/me/bobao/bobao-detail-add-edit/bobao-detail-add-edit?state=edit&id=${item.id}`})
	}
	
	const saveFun = async() => {

	}
	
	const delFun = (id) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DelteToDayBobao({id})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getLists(true)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
</script>

<style lang="scss">
.page-box{
	.list-box{

		.list-item{
			background-color: #fff;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(209,217,225,0.36);
			border-radius: 8rpx;	
			margin-bottom: 32rpx;
			
			.list-item-content{
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				
				.createusername-createtime{
					@include flex(row,space-between,center);
					margin-bottom: 30rpx;
					.createusername{
						color: #16294B;
						font-size: 28rpx;
						font-weight: 500;
					}
					.createtime{
						color: #A4AFC3;
						font-size: 24rpx;
					}
				}
				
				.context{
					color: #A4AFC3;
					font-size: 26rpx;
					line-height: 2em;
				}
			}
		}
		
		
	}
	
}


</style>
